import React, { Component } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import withRouter from 'umi/withRouter';
import { Affix, Icon, Menu } from 'antd';
import { findFirstNode } from '@/utils/funcUtils';
import styles from './index.less';
import memoryUtils from '@/utils/memoryUtils';
import screenfull from 'screenfull';

const { SubMenu } = Menu;
const active = {backgroundColor: '#E60A11', color: 'white'};

class BasicHeader extends Component {

  // handleClickMenu = (subSystem) => {
  //   if (subSystem.subSystemType === 'PAGE' || subSystem.subSystemType === 'USER') {
  //     router.push('/subSystem/' + subSystem.$handle);
  //   }
  // };
  constructor(props) {
    super(props)
    this.selected = false;
    this.state = {
      isFullscreen: true
    }
  }

  redirectToPage = (url) => {
    window.open(url,'top');
  }

  setFullScreen() {
    if (!screenfull.isEnabled) {
      return false
    }
    screenfull.toggle()
    this.setState({ isFullscreen: screenfull.isFullscreen })
  }

//   render() {
//     const { subSystems, location, dispatch,title } = this.props;
//     const { isFullscreen } = this.state;
//     let $handle = '';
//     if(location.pathname.startsWith('/subSystemm')) {
//       const url = location.pathname.split('/');
//       $handle = url[2];
//       dispatch({ type: 'subSystem/fetch', payload: {subSystemOrd: 'station:|h:'+ $handle}});
//     }
//     const active = {backgroundColor: '#E60A11', color: 'white'};
//     return (
//       <Affix offsetTop={0}>
//         <div className={styles.dashboardHeader}>
//           <div className={styles.header}>
//             <div className={styles.logo}><img src={require('@/assets/images/logo.png')}/>
//               <div className={styles.tomo}>
//                 <h1>ENGINEERING</h1>
//                 <h2>TOMORROW</h2>
//               </div>
//             </div>
//             <div className={styles.title} style={{color: memoryUtils.titleColor}}><span>{ title }</span></div>
//             <div className={styles.logout}>
//               <div>
//                 {memoryUtils.user.username},
//                 <span onClick={()=>{window.open('/logout', '_self');}}> 退出</span>
//               </div>
//             </div>
//             <div className={styles.fullScreen} onClick={()=>this.setFullScreen()}>{isFullscreen?<Icon type='fullscreen'/>:<Icon type='fullscreen-exit'/>}</div>
//           </div>
//           <div className={styles.navMenus}>
//             {
//               subSystems.map((subSystem) => {
//                 if(subSystem.children && subSystem.children.length > 0) {
//                   let selected = false;
//                   const menu = (
//                     <Menu>
//                       {
//                         subSystem.children.map((childSubsystem)=> {
//                           if($handle===childSubsystem.$handle) {
//                             selected = true;
//                           }
//                           return (
//                             <Menu.Item style={($handle==childSubsystem.$handle)?{backgroundColor:'#00f6ff'}:{}}>
//                               <Link to={(childSubsystem.lockToIndex?'/subSystemm/':'/subSystem/') + childSubsystem.$handle}>
//                                 <span>{childSubsystem.title}</span>
//                               </Link>
//                             </Menu.Item>
//                           );
//                         })
//                       }
//                     </Menu>
//                   );
//                   return (
//                     <Dropdown overlay={menu} placement="bottomCenter" trigger={['click', 'hover']}>
//                       <Button className={styles.navMenu} style={selected?active:{}}>{subSystem.title}</Button>
//                     </Dropdown>
//                   );
//                 } else {
//                   if(subSystem.subSystemType === 'URL') {
//                     return <Button className={styles.navMenu} onClick={()=>this.redirectToPage(subSystem.url)}>{subSystem.title}</Button>
//                   } else {
//                     return (
//                       <Link to={(subSystem.lockToIndex?'/subSystemm/':'/subSystem/') + subSystem.$handle}>
//                         <Button className={styles.navMenu} style={($handle===subSystem.$handle)?active:{}}>{subSystem.title}</Button>
//                       </Link>
//                     );
//                   }
//                 }
//               })
//             }
//           </div>
//         </div>
//       </Affix>
//     );
//   }
// }

buildSubNavMenus = (subSystems, $handle)=>{
  let navMenus = [];
  if(subSystems) {
    navMenus = subSystems.map((subSystem) => {
      if(subSystem.children) {
        return (
          <Menu.ItemGroup title={<span className='title' title={subSystem.title}>{subSystem.title}</span> }>
            {this.buildSubNavMenus(subSystem.children, $handle)}
          </Menu.ItemGroup>
        );
      } else {
        const initSubModule = findFirstNode(subSystem.modules);
        let path = '/';
        if(initSubModule) {
          path = '/subSystemm/' + subSystem.$handle + '/' + initSubModule.$handle;
        }
        if(subSystem.$handle === $handle) {
          this.selected = true;
        }
        return  <Menu.Item key={subSystem.$handle}>
          <Link to={path} className='title' title={subSystem.title}>{ subSystem.title }</Link>
        </Menu.Item>;
      }
    });
  }
  return navMenus;
}

buildNavMenus = (subSystems, $handle)=>{
  let navMenus = [];
  if(subSystems) {
    navMenus = subSystems.map((subSystem) => {
      this.selected = false;
      if(subSystem.children) {
        const subNavMenus = this.buildSubNavMenus(subSystem.children, $handle);
        return (
          <SubMenu title={<span className='title' title={subSystem.title}>{subSystem.title}</span>} className={styles.navMenu} style={this.selected?active:{}}>
            {subNavMenus}
          </SubMenu>
        );
      } else {
        const initSubModule = findFirstNode(subSystem.modules);
        let path = '/';
        if(initSubModule) {
          path = '/subSystemm/' + subSystem.$handle + '/' + initSubModule.$handle;
        }
        return (
          <Menu.Item key={subSystem.$handle} className={styles.navMenu} style={$handle===subSystem.$handle?active:{}}>
            <Link to={path} className='title' title={subSystem.title}>{ subSystem.title }</Link>
          </Menu.Item>
        );
      }
    });
  }
  return <Menu selectedKeys={[$handle]} mode="horizontal" theme="dark" style={{background: 'transparent', lineHeight: 'unset'}}>{ navMenus }</Menu>;
}

render() {
  const { subSystems, location, dispatch, title } = this.props;
  const { isFullscreen } = this.state;
  const url = location.pathname.split('/');
  const $handle = url[2];
  return (
    <Affix offsetTop={0}>
      <div className={styles.dashboardHeader}>
        <div className={styles.header}>
          <div className={styles.logo}>
            <img src={require('@/assets/images/logo.png')}/>
            <div className={styles.tomo}>
              <h1>ENGINEERING</h1>
              <h2>TOMORROW</h2>
            </div>
          </div>
          <div className={styles.title} style={{color: memoryUtils.titleColor}}><span>{ title }</span></div>
          <div className={styles.logout}>
            <div>
              {memoryUtils.user.username},
              <span onClick={()=>{window.open('/logout', '_self');}}> 退出</span>
            </div>
          </div>
          <div className={styles.fullScreen} onClick={()=>this.setFullScreen()}>{isFullscreen?<Icon type='fullscreen'/>:<Icon type='fullscreen-exit'/>}</div>
        </div>
        <div className={styles.navMenus}>
          {this.buildNavMenus(subSystems, $handle)}
        </div>
      </div>
    </Affix>
  );
}
}

export default connect(({ tlsWebServer }) => ({
  ...tlsWebServer,
}))(withRouter(BasicHeader));
